<template>
	<view>
		<view class="search">
			<u-search animation v-model="querys.id" @search="handleSelect" @custom="handleSelect" bg-color="#F7F7F7" placeholder="搜索结算单"></u-search>
		</view>
		<u-line color="#F7F7F7" />
		<view class="record-item" v-for="(item,index) in tableData" :key="index">
			<view class="u-flex u-row-between u-margin-bottom-20">
				<view class="u-flex">
					<view class="u-font-30 u-margin-right-10">结算金额</view>
					<view class="record-status">
						<image src="@/static/img/icon_clock.png"></image>
						<view>{{ getStatusLabel(billType, item.status) }}</view>
					</view>
				</view>
				<view class="record-money">
					<text class="u-font-26">￥</text>
					<text>{{item.amount | thousands}}</text>
				</view>
			</view>
			<view class="record-details">
				<view>结算单号：{{item.id}}</view>
				<view class="u-flex" @click="handleDetails(item)">
					<view class="u-margin-right-10">明细</view>
					<image src="@/static/img/icon_arrowright.png"></image>
				</view>
			</view>
			<u-line color="#F7F7F7" />
		</view>
	</view>
</template>

<script>
	import {
		getStatusLabel,
		billType
	} from '@/utils/status.js'
	export default {
		data() {
			return {
				billType,
				querys: {
					current: 1,
					size: 10
				},
				tableData: []
			}
		},
		onShow() {
			this.handleSelect()
		},
		onReachBottom() {
			this.querys.current += 1;
			this.getTableList()
		},
		methods: {
			getTableList() {
				const params = JSON.parse(JSON.stringify(this.querys))
				const that = this
				uni.showLoading({
					title: '加载中...'
				});
				that.$api.getSettlementRecord(params).then(res => {
					if (params.current === 1) {
						that.tableData = res.result.records
					} else {
						that.tableData = [...that.tableData, ...res.result.records]
					}
					uni.hideLoading();
				})
			},
			handleSelect() {
				this.querys.current = 1
				this.getTableList()
			},
			handleReset() {
				this.querys = {
					current: 1,
					size: 10
				}
				this.getTableList()
			},
			handleDetails(item) {
				uni.navigateTo({
					url: `/pages/settlement/details?id=${item.id}`
				})
			},
			getStatusLabel
		}
	}
</script>
<style scoped lang="less">
	.search {
		padding: 15px;
		background: #fff;
	}

	.record-item {
		padding: 15px 15px 0 15px;
		background: #fff;

		.record-status {
			display: flex;
			align-items: center;
			color: #202020;

			&>image {
				width: 20px;
				height: 20px;
				z-index: 2;
			}

			&>view {
				border-radius: 8px;
				border-right: 1px solid #0FBD7F;
				border-top: 1px solid #0FBD7F;
				border-bottom: 1px solid #0FBD7F;
				color: #0FBD7F;
				padding: 1px 5px 1px 11px;
				font-size: 10px;
				margin-left: -8px;
			}
		}

		.record-money {
			font-weight: bold;
			color: #F76260;
			font-size: 20px;
		}

		.record-details {
			font-size: 13px;
			font-weight: 400;
			color: #9D9D9D;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 15px;

			image {
				width: 12px;
				height: 12px;
			}
		}
	}
</style>
<style>
	page {
		background: #F7F7F7;
	}
</style>